<template>

  <div class="wrap">
    
    <div class="textArea">
      <textarea
        rows=""
        cols=""
        placeholder="说点什么吧~(200字)"
        v-model="content"
        maxlength="200"
      ></textarea>
      <div class="check" v-if="whatId==2">
        <van-checkbox v-model="checked">展示店铺</van-checkbox>
      </div>
    </div>
    <div class="uploadImg">
      <van-uploader :max-size="6000 * 1024"  @oversize="onOversize" v-model="fileList" :after-read="afterRead" :max-count="9" />
    </div>
    <!-- :before-delete="beforeDelete" -->
    <div class="submit" @click="getUserFollowList">发布</div>
  </div>
</template>
<script>
import axios from "axios"; // 引入axios
import { Field, Uploader, Checkbox ,Button} from "vant";
import { apipublish } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      checked:false,
      flag: false,
      value: "",
      fileList: [],
      reqimageUrl: "",
      content: "",
      whatId:'',//1用户，2商家，只有商家身份才显示 check框
    };
  },
  mounted() {
    this.whatId = JSON.parse(localStorage.getItem("loginInfo")).category;
  },
  methods: {
    //上传图片：
    afterRead(file) {},
    upLoadImg(dataItem) {
      var that = this
      var serverSrc = this.$imgUrl;
      var form_data = new FormData();
      form_data.append("file",dataItem);
      axios({
        url: serverSrc + "/common/upload",
        data: form_data,
        contentType: false,
        processData: false,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (res) {
        // alert("res.data.data.fileName", res.data.data.fileName);
        that.reqimageUrl = that.reqimageUrl + res.data.data.fileName + ",";
      });
    },
    onOversize(file) {
      this.$toast('文件大小不能超过 1000kb');
    },
    //发布帖子:
    getUserFollowList() {
      var that = this;
      if( this.fileList.length==0){
        this.$toast.fail('请上传帖子图片')
        return
      }
      this.fileList.map((item) => {
        that.upLoadImg(item.file);
      });
      setTimeout(function () {
        apipublish({
          content: that.content,
          imageUrl: that.reqimageUrl.toString().slice(0, -1),
          isShowShop: that.checked ? 1 : 0,
        }).then((res) => {
          if (res.code == 200) {
            that.$Toast.success("发布成功!");
            that.$router.push({
              path: "/pages/forumIndex",
              replace: true,
            });
          }
        });
      }, 500);
    },
  },
  created() {},
  components: {
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [Checkbox.name]: Checkbox,
  },
};
</script>

<style scoped>
.wrap {
  min-height: 100vh;
  background-color: #f2f4fa;
  padding-top: 15px;
}
.lineItem {
  margin-bottom: 5px;
}
.textArea {
  width: calc(100% - 20px);
  margin: 7px auto;
  background: #ffffff;
  border-radius: 20px;
}
textarea {
  width: 85%;
  border: 1px solid #fff;
  height: 100px;
  border-radius: 20px;
  padding: 20px;
}
textarea::placeholder {
  font-size: 13px;
  font-weight: 300;
  color: #999999;
}
.check {
  font-size: 13px;
  font-weight: 400;
  color: #181818;
  margin: 10px 20px;
  padding-bottom: 15px;
}
.uploadImg {
  width: calc(100% - 20px);
  margin: 21px auto;
}

.submit {
  width: 90%;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: 40px;
  left: 5%;
}
</style>
